<template>
    <!-- mine/pages/personalAccount/personalAccount.wxml -->
    <view :style="objColor" v-if="pageApiObj">
		<customer></customer>
		<image class="comImg" :src="(mixOtherIconList[5] && mixOtherIconList[5].icon)"></image>
		<view class="infoCon">
			<view class="infoLeft">
				<view class="accountTitle">
					个人账户总资产
				</view>
				<view class="accountVal">
					￥{{accountInfo.totalAccountBalance}}
				</view>
			</view>
			<view class="infoRigth">
				<view class="infoRecord" @tap="goReRecord(0)">
					收支记录
				</view>
			</view>
		</view>

		<view class="personalBox">
			<!-- 个人钱包 -->
			<view class="cardCon">
				<!-- <view class="cardTitle">个人钱包(元)</view><image class="cardTitleIcon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/QuestionMark.png" @tap="BulletFrame(1)"></image> -->
				
				<!-- 个人账户页面-增加申请退款按钮 龙龙需求 -->
				<view class="cardBox">
					<view>
						<view class="cardTitle">个人钱包(元)</view>
						<image class="cardTitleIcon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/QuestionMark.png" @tap="BulletFrame(1)"></image>
					</view>	
					<view class="refund_btn" @tap="goRefund" v-if='sellerNo !="changzhi"'>申请退款</view>
				</view>
				<view class="cardVal">￥{{ accountInfo.accountBalance }}</view>
				<view class="quotaCon">
					<view>
						<view class="quotaMark"></view>可用金额：{{ accountInfo.availableAccountBalance}}元
					</view>
					<view style="margin-top: 24rpx;">
						<view class="quotaMark"></view>不可用金额：{{ accountInfo.unAvailableAccountBalance }}元
					</view>
				</view>
				<view class="cardBottom">
					<view class="cardBottomTxt1" @tap="goReRecord(5)">
						<image class="cardBottomIcon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon-1.png"></image>
						账单
					</view>
					<view v-if="!isTjhz()" class="cardBottomTxt2" @tap="goPersonalAccount()">
						<image class="cardBottomIcon" :src="(mixIconList[9] && mixIconList[9].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/balance.png'"></image>
						余额充值
					</view>
				</view>
			</view>
			<!-- 平台奖励金 -->
			<view class="cardCon">
				<view class="cardTitle">平台奖励金(元)</view><image class="cardTitleIcon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/QuestionMark.png" @tap="BulletFrame(2)"></image>
	<!-- 			<view class="cardVal" v-if="!totalBonusRecord">￥{{ accountInfo.jiangLiBalance }}</view>
				<view class="cardVal" v-if="totalBonusRecord">￥{{ totalBonusRecord }}</view> -->
				<view class="cardVal">￥{{ accountInfo.jiangLiBalance }}</view>
				<view class="quotaCon">
				<!-- 	<view v-if="!totalBonusRecord">
						<view class="quotaMark"></view>可用金额：{{accountInfo.availablejiangLiBalance}}元
					</view>
					<view v-if="totalBonusRecord">
						<view class="quotaMark"></view>可用金额：{{totalBonusRecord}}元
					</view> -->
					<view v-if="totalBonusRecord">
						<view class="quotaMark"></view>可用金额：{{accountInfo.availablejiangLiBalance}}元
					</view>
					<view style="margin-top: 24rpx;">
						<view class="quotaMark"></view>不可用金额：{{accountInfo.unAvailablejiangLiBalance}}元
					</view>
				</view>
				<view class="cardBottom2">
					<view class="cardBottomTxt1" @tap="goReRecord(2)">
						<image class="cardBottomIcon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon-1.png"></image>
						账单
					</view>
				</view>
			</view>

			<!-- 人保账号 -->
			<!-- <view class="cardCon" >
				<view class="cardTitle">人保账号(元)</view><image class="cardTitleIcon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/QuestionMark.png" @tap="BulletFrame(3)"></image>
				<view class="cardVal">￥{{accountInfo.personBalance}}</view>
				<view class="quotaCon">
					<view>
						<view class="quotaMark"></view>可用金额：{{accountInfo.availablePersonBalance}}元
					</view>
					<view style="margin-top: 24rpx;">
						<view class="quotaMark"></view>不可用金额：{{accountInfo.unAvailablePersonBalance}}元
					</view>
				</view>
				<view class="cardBottom2">
					<view class="cardBottomTxt1" @tap="goReRecord()">
						<image class="cardBottomIcon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon-1.png"></image>
						账单
					</view>
				</view>
			</view> -->
				<!-- 个人账号 -->
				<!-- <view class="account" v-if="accountType == 1">
				    <view class="account_l">
				        <view class="txt1">{{ accountInfo.accountBalance }}</view>
				        <view class="txt2">
				            账户余额(元)
				            <image @tap="showBalanceFreezeFun" v-if="accountInfo.balanceFreeze" class="tipImg" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/tip.png"></image>
				        </view>
				        <view class="balanceFreeze" v-if="showBalanceFreeze">冻结账户余额{{ accountInfo.balanceFreeze / 100 }}元</view>
				        <view class="txt3" @tap="goRefund">申请退款</view>
				    </view>
				    <view class="account_r">
				        <view class="txt1">{{ accountInfo.jiangLiBalance }}</view>
				        <view class="txt2">
				            奖励余额(元)
				            <image @tap="showJiangLiBalanceFreezeFun" v-if="accountInfo.jiangLiBalanceFreeze" class="tipImg" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/tip.png"></image>
				        </view>
				        <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/accountImg.png"></image>
				        <view class="jiangLiBalance" v-if="showJiangLiBalanceFreeze">冻结奖励金额{{ accountInfo.jiangLiBalanceFreeze / 100 }}元</view>
				    </view>
				</view> -->
				<!-- 车队账号 -->
				<!-- <view class="account1" v-if="accountType != 1">
				    <view class="accountMoney">
				        <view class="txt1">{{ accountInfo.deductMode == 'TeamAccount' ? '*****' : accountInfo.accountBalance }}</view>
				        <text class="tip" v-if="accountInfo.deductMode == 'TeamAccount'">暂无权限查看</text>
				    </view>
				    <view class="txt2">车队账户(元)</view>
				    <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/accountImg.png"></image>
				</view> -->

				<!-- 收支记录 -->
				<!-- <view class="record">
				    <view class="record_top">
				        <view class="title">收支记录</view>
				        <view class="more" @tap="goReRecord">
				            查看更多
				            <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/turn_act.png"></image>
				        </view>
				    </view>
				</view> -->
		</view>

		<uni-popup ref="showBulletFrame" background-color="#fff" safe-area type="center">
			<view class="BulletFrameCon">
				<view class="bulletTitle">
					{{frame.title}}
				</view>
				<view class="bulletVal">
					{{frame.val}}
				</view>
				<view class="bulletButton" @tap="showFrame">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	'use strict';
	import Upgrading from '../../../components/upgrading/upgrading';
	// exports.__esModule = true; // mine/pages/personalAccount/personalAccount.ts

	var app = getApp();

	var https_1 = require('./../../../api/https.js');

	import { userTotalBonusRecord } from "./../../../api/marketing/userAccountApi";

	export default {
		components: {
			Upgrading
		},
		data() {
			return {
				totalBonusRecord:'',
				frame:{
					title:'标题',
					val:''
				},
				showBalanceFreeze: false,
				showJiangLiBalanceFreeze: false,
				accountType: 1,

				accountInfo: {
					accountBalance: '',
					balanceFreeze: '',
					jiangLiBalance: '',
					jiangLiBalanceFreeze: '',
					deductMode: ''
				},

				priceType: 0,
				customRechargePrice: 30,
				priceTypeList: [30, 50, 100, 150],
				customPrice: '',

				//收支记录
				recordsList: [],

				orderNo: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			if (options.tab) {
				this.accountType= options.tab
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function () {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function () {
			if (this.accountType == 1) {
				uni.setNavigationBarTitle({
					title: '个人账号'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '车队账号'
				});
			}

			this.getAccountInfo();
			this.getPageList();

			if(this.marketingSwitch) {
				userTotalBonusRecord({
					accountType:this.accountType,
					current:1,
					// date: "2022-08",
					plUserId: uni.getStorageSync('memberId'),
					sellerId: app.globalData.sellerId,
					size: 10000,
					tab: 1,//全部类型
				}).then((res) => {
					console.log(res.data,'wb奖励金余额11111')
					this.setData({
						totalBonusRecord : res.data
					})
					
				}).catch((err) => {
					console.log(err)
				})
			}
			
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function () {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function () {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function () {},
		methods: {
			showJiangLiBalanceFreezeFun: function () {
				this.showJiangLiBalanceFreeze= !this.showJiangLiBalanceFreeze
			},

			showBalanceFreezeFun: function () {
				this.showBalanceFreeze= !this.showBalanceFreeze
			},

			//账户信息
			getAccountInfo: function () {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				https_1
					.getAccountInfo({
						tab: this.accountType
					})
					.then(function (res) {
						if (res.code == 0) {
							var data = res.data;
							data.totalAccountBalance = (data.totalAccountBalance / 100).toFixed(2); // 总资产
							data.accountBalance = (data.accountBalance / 100).toFixed(2); // 个人钱包
							data.availableAccountBalance = (data.availableAccountBalance / 100).toFixed(2); // 个人可用金额
							data.unAvailableAccountBalance = (data.unAvailableAccountBalance / 100).toFixed(2); // 个人不可用金额
							data.jiangLiBalance = (data.jiangLiBalance / 100).toFixed(2); // 平台奖励金额
							data.availablejiangLiBalance = (data.availablejiangLiBalance / 100).toFixed(2); // 平台奖可用金额
							data.unAvailablejiangLiBalance = (data.unAvailablejiangLiBalance / 100).toFixed(2); // 平台奖不可用金额
							data.personBalance = (data.personBalance / 100).toFixed(2); // 人保账号金额
							data.availablePersonBalance = (data.availablePersonBalance / 100).toFixed(2); // 人保账号可用金额
							data.unAvailablePersonBalance = (data.unAvailablePersonBalance / 100).toFixed(2); // 人保账号不可用金额
							that.accountInfo= data
							uni.hideLoading();

							//页面加载最慢的请求结束后再显示
							that.pageApiObj = true
						}
					})
					['catch'](function (res) {
					uni.hideLoading();
				});
			},

			//收支记录
			getPageList: function () {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				https_1
					.pageList({
						accountType: this.accountType,
						tab: 1,
						current: 1,
						size: 10
					})
					.then(function (res) {
						var data = res.data.accountFlowMiniVO.records;
						data.forEach(function (element) {
							element.amountChange = (element.amountChange / 100).toFixed(2);
							element.accountBalance = (element.accountBalance / 100).toFixed(2);
						});
						that.recordsList=data
						uni.hideLoading();
					})
					['catch'](function (res) {
					uni.hideLoading();
				});
			},


			//申请退款
			goRefund: function () {
				uni.navigateTo({
					url: '../refund/refund'
				});
			},

			//选择充值类型
			checkPriceType: function (e) {
				this.priceType= e.currentTarget.dataset.index,
					this.customRechargePrice= this.priceTypeList[e.currentTarget.dataset.index],
					this.customPrice= ''
			},

			//输入时触发（自定义充值金额）
			getCustomPrice: function (e) {
				this.priceType= -1,
					this.customPrice= e.detail.value,
					this.customRechargePrice= e.detail.value
			},

			//收支记录（查看更多）
			goReRecord: function (e) {
				uni.navigateTo({
					url: '../reRecord/reRecord?accountType=' + this.accountType +'&typeIndex='+e
				});
			},

			//去充电
			goCharing: function () {
				uni.redirectTo({
					url: '/packageFunctional/sitelist/sitelist'
				});
			},

			//弹框
			BulletFrame:function (e) {
				var sonEnum
				var th = this
				if(e===1){
					sonEnum = 'PLATFORM_CHARGE'
					th.frame.title = '个人钱包'
				}else if(e===2){
					sonEnum = 'BOUNTY'
					th.frame.title = '平台奖励金'
				}else if(e===3){
					sonEnum = 'PERSON_ACCOUNT'
					th.frame.title = '人保账号'
				}
				https_1
				.getContent({
					sonEnum:sonEnum
				})
				.then(function (res) {
					if(res.code === 0){
						th.frame.val = res.data
					}
					th.$refs.showBulletFrame.open()
				})

			},

			showFrame:function () {
				this.$refs.showBulletFrame.close()
			},

			goPersonalAccount: function() {
				uni.navigateTo({
					url: '/mine/pages/recharge/recharge'
				});

			},
		}
	};
</script>
<style lang="less">
    /* mine/pages/personalAccount/personalAccount.wxss */
    @import "../../../commin/commin.less";
	.infoCon{
		display: flex;
		justify-content: center;
		position: relative;
		padding-top: 62rpx;
	}
	.infoLeft{
		width: 100%;
		margin-left: 33rpx;
		.accountTitle{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.accountVal{
			margin-top: 45rpx;
			font-size: 64rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	.infoRigth{
		width: 100%;
		.infoRecord{
			margin-top: 1em;
			padding: 5rpx 24rpx;
			float: right;
			text-align: center;
			background: #FFFFFF;
			border-radius: 23rpx 0rpx 0rpx 23rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: @blue;
		}
	}

	.cardCon{
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 14rpx 0rpx rgba(166,171,179,0.14);
		border-radius: 16rpx;
		padding: 40rpx 31rpx 0 31rpx;
		margin-bottom: 16rpx;
		.cardTitle{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #303133;
			display: inline-block;
			margin-right: 8rpx;
		}
		.cardTitleIcon{
			width: 26rpx;
			height: 26rpx;
			vertical-align: middle;
		}
		.cardVal{
			font-size: 64rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			margin-top: 35rpx;
		}
		.quotaCon{
			margin-top: 24rpx;
			background: #F5F7FA;
			padding: 24rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #909399;
			.quotaMark{
				width: 8rpx;
				height: 8rpx;
				background: #909399;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				margin-right: 8rpx;
			}
		}
		.cardBottom{
			display: flex;
			grid-template-columns: 50% 50%;
			text-align: center;
			padding: 10rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.cardBottom2{
			text-align: center;
			padding: 10rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.cardBottomIcon{
			width: 24rpx;
			height: 24rpx;
			vertical-align: middle;
			margin-right: 8rpx;
		}
		.cardBottomTxt1{
			width: 100%;
			padding: 15rpx 0;
			color: #606266;
		}
		.cardBottomTxt2{
			width: 100%;
			padding: 15rpx 0;
			border-left: 1rpx solid #DCDFE6;
			color: @blue;
		}
	}
	.comImg{
		position: absolute;
		width: 100%;
		top: 0rpx;
	}
    page {
        background-color: @text-color6;
    }

    .personalBox {
		position: relative;
		// z-index: 1;
        .margins(16rpx, 24rpx, 0rpx, 24rpx);
		margin-top: 40rpx;
        padding-bottom: 30rpx;
        .account {
            display: flex;
            justify-content: center;
            text-align: center;
            background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
            .borders(2rpx, @white-color);
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
            .paddings(56rpx, 35rpx, 0, 83rpx);

            .account_l {
                margin-right: 131rpx;

                .txt1 {
                    .fontsize(64rpx);
                    font-family: DIN;
                    font-weight: bold;
                    color: @text-color1;
                }

                .txt2 {
                    .fontsize(24rpx);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color3;
                    .margins(24rpx, 0, 48rpx, 0);
                    .tipImg{
                        .kuangao(26rpx,26rpx);
                        margin-left: 15rpx;
                    }
                }

                .txt3 {
                    .kuangao(180rpx, 64rpx);
                    .lineheight(64rpx);
                    text-align: center;
                    background: rgba(20, 135, 250, 0.06);
                    border-radius: 32px;
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @blue;
                    margin-left: 15rpx;
                }

                .balanceFreeze{
                    position: absolute;
                    .kuangao(244rpx,64rpx);
                    line-height: 64rpx;
                    text-align: center;
                    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
                    .borders(2rpx,@white-color);
                    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color3;
                    margin-top: -40rpx;
                    margin-left: -24rpx;
                }
            }

            .account_r {
                .txt1 {
                    .fontsize(64rpx);
                    font-family: DIN;
                    font-weight: bold;
                    color: @text-color1;
                }

                .txt2 {
                    .fontsize(24rpx);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color3;
                    margin-top: 24rpx;
                    .tipImg{
                        .kuangao(26rpx,26rpx);
                        margin-left: 15rpx;
                    }
                }

                .img {
                    .kuangao(229rpx, 156rpx);
                }
                .jiangLiBalance{
                    position: absolute;
                    .kuangao(244rpx,64rpx);
                    line-height: 64rpx;
                    text-align: center;
                    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
                    .borders(2rpx,@white-color);
                    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color3;
                    margin-top: -150rpx;
                }
            }
        }
        .account1{
            background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
            .borders(2rpx, @white-color);
            margin-bottom: 16rpx;
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
            .accountMoney{
                .tip{
                    position: absolute;
                    margin-top: -65rpx;
                    right: 130rpx;
                    .fontsize(20rpx);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color4;
                }
            }
            .txt1 {
                text-align: center;
                .fontsize(64rpx);
                margin-top: 74rpx;
                font-family: DIN;
                font-weight: bold;
                color: @text-color1;
            }

            .txt2 {
                text-align: center;
                .fontsize(24rpx);
                font-family: PingFang SC;
                font-weight: 400;
                color: @text-color3;
                margin-top: 24rpx;
            }

            .img {
                .kuangao(229rpx, 156rpx);
                margin-top: -80rpx;
            }
        }

        .setting {
            background: linear-gradient(0deg, @white-color, #F4F6F8);
            .lineheight(60rpx);
            .borders(2rpx, @white-color);
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
            .margins(16rpx, 0rpx, 16rpx, 0rpx);
            .paddings(40rpx, 32rpx, 37rpx, 32rpx);

            .setting_title {
                display: flex;
                .fontsize(30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @text-color2;
                .tips{
                    .fontsize(22rpx);
                    color: @text-color4;
                    margin-left: 20rpx;
                }
            }

            .priceType {
                display: flex;
                flex-wrap: wrap;

                .type {
                    .kuangao(170rpx, 64rpx);
                    .lineheight(64rpx);
                    background: #F5F7FA;
                    .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
                    text-align: center;
                    .fontsize(30rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @text-color3;
                    .margins(36rpx, 24rpx, 0, 0);
                }

                .type_action {
                    background: rgba(20, 135, 250, 0.06);
                    .borders(1rpx, @blue);
                    .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
                    .fontsize(30rpx);
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: @blue;
                }

                .custom {
                    display: flex;
                    align-items: center;
                    margin-top: 36rpx;
                    .fontsize(30rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @text-color3;

                    .custom_img {
                        margin-left: 23rpx;
                        .kuangao(26rpx, 27rpx);
                    }

                    .custom_input {
                        .kuan(150rpx);
                        text-align: center;
                        .fontsize(28rpx);
                        color: @text-color3;
                        border-bottom: 1rpx solid @text-color3;
                    }
                }
            }

            .setting_btn {
                .fontsize(30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @white-color;
                margin: 40rpx auto 0;
                .kuangao(270rpx, 88rpx);
                .lineheight(88rpx);
                text-align: center;
                background: linear-gradient(105deg, #2B99FF, #1B8CF5);
                box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
                border-radius: 44rpx;
            }
        }

        .record {
            margin-bottom: 40rpx;
            background: linear-gradient(0deg, @white-color, #F4F6F8);
            // .paddings(40rpx,32rpx,40rpx,32rpx);
            .borders(2rpx, @white-color);
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            border-radius: 16rpx;

            .record_top {
                display: flex;
                justify-content: space-between;
                .paddings(40rpx, 32rpx, 24rpx, 32rpx);
                border-bottom: 1rpx solid @text-color5;
            ;

                .title {
                    .fontsize(34rpx);
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: @text-color2;
                }

                .more {
                    display: flex;
                    align-items: center;
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @blue;

                    .img {
                        .kuangao(11rpx, 18rpx);
                        margin-left: 12rpx;
                    }
                }
            }
            .record_item{
                .margins(40rpx,32rpx,0,32rpx);
                padding-bottom: 40rpx;
                border-bottom: 1rpx dashed #C0C4CC;
                .itemDisplay{
                    display: flex;
                    justify-content: space-between;
                    .itemTitle{
                        display: flex;
                        align-items: center;
                        margin-bottom: 23rpx;
                        .name{

                            .kuan(350rpx);
                            overflow:hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            -o-text-overflow:ellipsis;
                            .fontsize(30rpx);
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: @text-color1;

                        }
                        .tag{
                            margin-left: 16rpx;
                            .kuangao(118rpx,32rpx);
                            .lineheight(32rpx);
                            .borders(1rpx,@blue);
                            text-align: center;
                            background: rgba(20, 135, 250, 0.06);
                            border-radius: 16rpx;
                            .fontsize(22rpx);
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: @blue;
                        }
                    }
                    .changeAmount{
                        .fontsize(34rpx);
                        font-family: DIN;
                        font-weight: bold;
                        color: @text-color1;
                    }
                    .changeAmount1{
                        .fontsize(34rpx);
                        font-family: DIN;
                        font-weight: bold;
                        color: @orange;
                    }
                    .balance{
                        display: flex;
                        .fontsize(26rpx);
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: @text-color3;
                        .money{
                            color: @orange;
                        }
                    }
                    .time{
                        .fontsize(24rpx);
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: @text-color3;
                    }

                }
            }
            .record_item:last-child { border-bottom: 0rpx;}
        }
    }
    .goCharing{
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: @blue;
        padding-bottom: 50rpx;
        text-align: center;
    }

	.BulletFrameCon{
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: PingFang SC;
		.bulletTitle{
			padding:45rpx 0rpx 40rpx 0rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #303133;
		}
		.bulletVal{
			font-size: 30rpx;
			font-weight: 500;
			color: #303133;
			line-height: 45rpx;
			padding: 0 35rpx;
			white-space: pre-line;
		}
		.bulletButton{
			margin-top: 86rpx;
			text-align: center;
			border-top: 1rpx solid #DCDFE6;
			padding: 40rpx 0;
			font-weight: bold;
			color: var(--textColor);
			font-size: 30rpx;
		}
	}


	//个人账户页面-增加申请退款按钮 龙龙需求
	.cardBox{
		display: flex;
		justify-content: space-between;
		.refund_btn{
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: #fff;
			color: var(--textColor);
			border: 1px solid var(--textColor);
			border-radius: 44rpx;
			font-size: 28rpx;
		}
	}

</style>
